{% extends "base.html" %}
  {% block content %}
  <div id="page-wrapper">
     <div class="row">
         <div class="col-lg-12">
             <h2 class="page-header">Manage User</h2>
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     Manage User
                     <!-- begin action -->
                     <div class="btn-group" style="float:right">
                       <button type="button" class="btn btn-outline btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       Action <span class="caret"></span>
                       </button>
                       <ul class="dropdown-menu">
                         <li><a id="add_host" href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> | Add </a></li>
                         <li role="separator" class="divider"></li>
                         <li><a id="modify_user" href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> | Modify </a></li>
                         <li role="separator" class="divider"></li>
                         <li><a id="set_password" href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> | SetPassword </a></li>
                         <li role="separator" class="divider"></li>
                         <li><a id="delete_user" href="#"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> | Delete </a></li>
                       </ul>
                       <!-- begin all modal  -->
                       <!-- add  modal -->
                       <div id="add_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Add</h4>
                             </div>
                             <div class="modal-body">
                               <form class="form-horizontal" id="add_data" method="post" action="/account/add_user/">
                                 <fieldset>
                                   <div class="form-group">
                                     <label for="name" class="col-sm-3 control-label">user Name</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="name" name="username" minlength="1" type="text" placeholder="username" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="password" class="col-sm-3 control-label">Password</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="password" name="password" minlength="1" type="password" placeholder="******" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="passwordagain" class="col-sm-3 control-label">Password again</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="passwordagain" name="passwordagain" minlength="1" type="password" placeholder="******" required>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label label for="business" class="col-sm-3 control-label">Business</label>
                                     <div class="col-sm-offset-4 col-sm-8">
                                       <div class="checkbox">
                                           {% if businesses %}
                                           {% for b in businesses %}
                                           <input  type="checkbox" name="business" value={{ b.name }}> {{ b.name }}<br>
                                           {% endfor %}
                                           {% else %}
                                           <input  type="checkbox" name="business" value='unkonwn'> unknown <br> 
                                           {% endif %}
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label label for="privilege" class="col-sm-3 control-label">Priveleges</label>
                                     <div class="col-sm-offset-4 col-sm-8">
                                       <div class="checkbox">
                                           {% if privileges %}
                                           {% for p in privileges %}
                                           <input  type="checkbox" name="privilege" value={{ p.name }}> {{ p.name }}<br>
                                           {% endfor %}
                                           {% else %}
                                           <input  type="checkbox" name="privilege" value='unkonwn'> unknown <br> 
                                           {% endif %}
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="email" class="col-sm-3 control-label">Email</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="email" name="email" minlength="1" type="text" placeholder="aaa@bbb.com" required>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label for="telephone" class="col-sm-3 control-label">Telephone</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="telephone" name="telephone" minlength="1" type="text" placeholder="phone number" required>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label for="department" class="col-sm-3 control-label">Department</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="department" name="department" minlength="1" type="text" placeholder="xxx department" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <div class="checkbox">
                                         <label>
                                           <input type="checkbox" name="superuser" value="true"> Is Superuser Or Not
                                         </label>
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <button onclick="submit" id="add_commit" type="submit" class="btn btn-outline btn-success btn-xs">Submit</button>
                                     </div>
                                   </div>
                                 </fieldset>
                               </form>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end add  modal -->

                       <!-- delete  modal -->
                       <div id="delete_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Are You Sure?</h4>
                             </div>
                             <div class="modal-body">
                               <form id="delete_data" class="form-inline" method="POST" action="/account/del_user/">
                               <!-- jquery will append content here -->
                               </form>
                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="delete_commit" type="button" class="btn btn-outline btn-danger btn-xs" data-dismiss="modal" >Delete</button>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end delete   -->
                       
                       <!-- modify --> 
                       <div id="modify_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Modify</h4>
                             </div>
                             <div class="modal-body">

                               <form id="modify_data" class="form-horizontal" method="POST" action="/account/setup_user/">
                                   <div class="form-group">
                                     <label for="id" class="col-sm-3 control-label">ID</label>
                                     <div class="col-sm-9">
                                       <input readonly class="form-control" id="id" name="id" minlength="1" type="text" placeholder="id" required>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label for="username" class="col-sm-3 control-label">user Name</label>
                                     <div class="col-sm-9">
                                       <input readonly class="form-control" id="username" name="username" minlength="1" type="text" placeholder="username" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label label for="business" class="col-sm-3 control-label">Business</label>
                                     <div class="col-sm-offset-4 col-sm-8">
                                       <div class="checkbox">
                                           {% if businesses %}
                                           {% for b in businesses %}
                                           <input  type="checkbox" name="business" value={{ b.name }}> {{ b.name }}<br>
                                           {% endfor %}
                                           {% else %}
                                           <input  type="checkbox" name="business" value='unkonwn'> unknown <br> 
                                           {% endif %}
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label label for="privilege" class="col-sm-3 control-label">Priveleges</label>
                                     <div class="col-sm-offset-4 col-sm-8">
                                       <div class="checkbox">
                                           {% if privileges %}
                                           {% for p in privileges %}
                                           <input  type="checkbox" name="privilege" value={{ p.name }}> {{ p.name }}<br>
                                           {% endfor %}
                                           {% else %}
                                           <input  type="checkbox" name="privilege" value='unkonwn'> unknown <br> 
                                           {% endif %}
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="email" class="col-sm-3 control-label">Email</label>
                                     <div class="col-sm-9">
                                       <input  class="form-control" id="email" name="email" minlength="1" type="text" placeholder="name" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="telephone" class="col-sm-3 control-label">Telephone</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="telephone" name="telephone" minlength="1" type="text" placeholder="phone number" required>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label for="department" class="col-sm-3 control-label">Department</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="department" name="department" minlength="1" type="text" placeholder="xxx department" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <div class="checkbox">
                                         <label>
                                           <input id="issuperuser"  type="checkbox" name="issuperuser" value="true"> Is Superuser Or Not
                                         </label>
                                       </div>
                                     </div>
                                   </div>
                               </form>
                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="modify_commit" type="button" class="btn btn-outline btn-primary btn-xs" data-dismiss="modal" >Save</button>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end modify  -->

                       <!-- set password -->
                       <div id="set_password_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="buttton" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                 <h4 class="modal-title" id="exampleModalLabel">Set Password</h4>
                               </div>
                               <div class="modal-body">
                                 <form id="set_password_form" class="form-horizontal" method="POST" action="/account/set_password/">
                                     <div class="form-group">
                                       <label for="username" class="col-sm-3 control-label">User Name</label>
                                       <div class="col-sm-9">
                                         <input  class="form-control" id="username" name="username" minlength="1" type="text" placeholder="name" required>
                                       </div>
                                     </div>
                                     <div class="form-group">
                                       <label for="origin" class="col-sm-3 control-label">Origin Password</label>
                                       <div class="col-sm-9">
                                         <input  class="form-control" id="origin" name="origin" minlength="1" type="password" placeholder="******" required>
                                       </div>
                                     </div>
                                     <div class="form-group">
                                       <label for="new" class="col-sm-3 control-label">New Pssword</label>
                                       <div class="col-sm-9">
                                         <input  class="form-control" id="new" name="new" minlength="1" type="password" placeholder="******" required>
                                       </div>
                                     </div> 
                                     <div class="form-group">
                                       <label for="newagain" class="col-sm-3 control-label">New Password Again</label>
                                       <div class="col-sm-9">
                                         <input class="form-control" id="newagain" name="newagain" minlength="1" type="password" placeholder="******" required>
                                       </div>
                                     </div>
                                 </form>
                               </div>
                               <div class="modal-footer">
                                 <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                                 <button id="set_password_commit" type="button" class="btn btn-outline btn-primary btn-xs" data-dismiss="modal" >save</button>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>

                       <!-- end set password -->

                       <!-- checkbox error modal -->
                       <div id="checkbox_error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="checkbox_error">There is no item selected</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end checkbox page error -->

                       <!-- alert error modal -->
                       {% if error %}
                       <div id="error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="error">{{ error }}</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert error modal  -->
                       
                       <!-- alert success modal -->
                       {% if success %}
                       <div id="success_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 id="success" class="modal-title">{{ success }}</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert success modal  -->
                     </div>
                     <!-- end action -->
                 </div>
                 <!-- /.panel-heading -->
                 <div class="panel-body">
                     <div class="dataTable_wrapper">
                         <table id="datatable-demo" class="table table-striped table-bordered table-hover">
                             <thead>
                                 <tr>
                                    <th>
                                      <input id="CHKall" type="checkbox" name="CHKall" value="CHKall"></input>
                                    </th>
                                    <th>ID</th>
                                    <th>UserName</th>
                                    <th>Email</th>
                                    <th>Supermen</th>
                                    <th>Business</th>
                                    <th style="display:none">Department</th>
                                    <th>Privilege</th>
                                    <th style="display:none">Telephone</th>
                                    <th style="display:none">Opearation</th>
                                 </tr>
                             </thead>
                             <tbody>
                               {% if users %}
                               {% for u in users %}
                               <tr id="{{ u.user.id }}" class="even gradeC">
                                   <td>
                                     <input  name="CHKlist" type="checkbox" value="{{ u.user.id }}"></input>
                                   </td>
                                   <td id="id" style="word-break:break-all">{{ u.user.id }}</td>
                                   <td id="username" style="word-break:break-all">{{ u.user.username }}</td>
                                   <td id="email" style="word-break:break-all">{{ u.user.email }}</td>
                                   <td id="issuperuser" style="word-break:break-all">{{ u.user.is_superuser|lower }}</td>
                                   <td id="business" style="word-break:break-all">{% for b in u.business.all %}{{ b.name }} {% endfor %}</td>
                                   <td id="department" style="display:none;word-break:break-all">{{ u.department }}</td>
                                   <td id="privilege" style="word-break:break-all">{% for p in u.privilege.all %} {{ p.name }} {% endfor %}</td>
                                   <td id="telephone" style="display:none;word-break:break-all">{{ u.telephone }}</td>
                                   
                                   <td style="display:none">
                                       <button id="modify_user" name="modify_button" value="{{ u.user.id }}" type="button" class="btn btn-outline btn-success btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</button>
                                       <button id="set_password" name="set_password" value="{{ u.user.username }}" type="button" class="btn btn-outline btn-success btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Set_password</button>
                                   </td>
                               </tr>
                               {% endfor %}
                               {% endif %}
                             </tbody>
                         </table>
                     </div>
                     <!-- /.table-responsive -->
                 </div>
                 <!-- /.panel-body -->
             </div>
             <!-- /.panel -->
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
   </div>
        <!-- /#page-wrapper -->

  {% endblock %}
    {% block jquery%}
    <script type="text/javascript">
      $(document).ready(function(){
        //全选或全不选 
        $("#CHKall").click(function(){
            if(this.checked){    
                $("input[name='CHKlist']").prop("checked", true);   
            }else{    
                $("input[name='CHKlist']").prop("checked", false); 
            }    
         });  
        // end slelect all

        //data table
        $("#datatable-demo").DataTable( {
           //设置第一列为初始化排序的列
           "order": [[ 1, "desc" ]],
           //该值的含义为。初始化datatable，但对序号为0,10列的列不进行排序，别的列均可进行排序 
           "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,9 ] }]  
           });     
        // end data table
        // add //
        $("#add_host").click(function(){
            $('#add_modal').modal('show')

            $("#add_commit").click(function(){
                $("#add_data").submit()
            });
            
            });
        // end add //


        // delete //
        $("#delete_user").click(function(){
           var ids=[];
           $('input[name="CHKlist"]:checked').each(function(){
               var id=$(this).val();
               ids.push(id);
           }); 
           if (ids.length >0)
               {
               $("#delete_data").empty()
               for (i in ids){     
                   $("#delete_data").append(
                       '<div class="form-group"><label class="control-label">ID: </label><input readonly name="id" value="'+ ids[i] +'" type="text" class="form-control"></input></div> <br>'
                       );
                   };
                 $('#delete_modal').modal('show')
               }
             else 
                {
                   $('#checkbox_error_modal').modal('show')
                }
           $("#delete_commit").click(function(){
                 $("#delete_data").submit()
             });
      });
      // end delete //

      // set passwotd //
      $("#set_password").click(function(){
          var ids=[];
          $('input[name="CHKlist"]:checked').each(function(){
              var id=$(this).val();
              ids.push(id);
          });
          var tmp_id=ids[0];
          var tmp_name=$("#"+tmp_id).find("#username").text();
          var tmp_username = tmp_name;
          $('#set_password_form').find('input#username').val(tmp_username);
          $('#set_password_modal').modal('show');
          $("#set_password_commit").click(function(){
              $("#set_password_form").submit()
            });
      });
      // end set password //

      // modify //
      $("#modify_user").click(function(){
          var ids=[];
          $('input[name="CHKlist"]:checked').each(function(){
              var id=$(this).val();
              ids.push(id);
          });
          var tmp_id=ids[0];
          var tmp_name=$("#"+tmp_id).find("#username").text();
          var tmp_email=$("#"+tmp_id).find("#email").text();
          var tmp_issuperuser=$("#"+tmp_id).find("#issuperuser").text();
          var tmp_business=$("#"+tmp_id).find("#business").text();
          var tmp_privilege=$("#"+tmp_id).find("#privilege").text();
          var tmp_telephone=$("#"+tmp_id).find("#telephone").text();
          var tmp_department=$("#"+tmp_id).find("#department").text();
          $('#modify_data').find('input#id').val(tmp_id);
          $('#modify_data').find('input#username').val(tmp_name);
          $('#modify_data').find('input#email').val(tmp_email);
          $('#modify_data').find('input#department').val(tmp_department);
          //$('#modify_data').find('input#business').val(tmp_business);
          //$('#modify_data').find('input#privilege').val(tmp_privilege);
          $('#modify_data').find('input#telephone').val(tmp_telephone);
          if (tmp_issuperuser == "true")
              {
              $('#modify_data').find('input#issuperuser').attr("checked",true);
              $('#modify_data').find('input#isuperuser').val(tmp_issuperuser);
              }
          else
              {
              $('#modify_data').find('input#issuperuser').attr("checked",false);
              $('#modify_data').find('input#issuperuser').val(tmp_issuperuser);
              }


          $('#modify_modal').modal('show')
          $('#modify_commit').click(function(){
              $('#modify_data').submit();
              });
      })
      // end modify //

      //show success and error modal //
      $('#success_modal').modal('show')
      $('#error_modal').modal('show')
      //  end show success and error modal //
    });  
    </script>
    {% endblock %}
